<!--
 * @Author: wusd
 * @Date: 2022-05-18 14:58:44
 * @LastEditors: wusd
 * @LastEditTime: 2024-11-08 16:30:53
 * @Description: 
 * 
-->
<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator'
import { WPageConfig } from 'types/page'
import page from '@/components/page'
import wform from '@/components/form'
import test from '../../testForm'
import { SearchParams } from 'types/table'
import { AnyObj } from 'types/common'
@Component({
  name: 'WPage',
  components: {
    page,
    wform,
    test
  }
})
export default class WPage extends Vue {
  renderTest() {
    return <div>wecfwe</div>
  }
  renderHeader() {
    return <div style="color:red;">自定义表头</div>
  }
  handleYes() {
    console.log(this.dialog.model)
  }
  public pageConfig2: WPageConfig = {
    dialogConfig: {
      width: '860px'
    },
    fixWPageConfig: config => {
      if (config && config.tableConfig) {
        config.tableConfig.tooltip = false
        // return config
      }
    },
    tableConfig: {
      tooltip: true,
      resetBtnShow: true,
      loading: false,
      resetIsDefaultValue: true,
      resetFunc: function () {
        console.log(123)
      },
      // afterGetList: $this => {
      //   console.log('$this', $this)
      //   console.log('this', this)
      // },
      nodeData: {
        props: {
          height: 'auto',
          'row-key': 'id',
          fixed: 'right'
        },
        attrs: {
          border: true
        },
        on: {
          'selection-change': (data: any) => {
            console.log(data)
          }
        }
      },
      search: {
        // stow: false,

        list: [
          {
            label: '年龄cccc',
            prop: 'age',
            show: () => {
              return false
            }
            // render: this.renderTest
          },
          {
            label: '年龄1999',
            prop: 'age1',
            defaultValue: '88'
          },
          {
            label: '年龄3',
            prop: 'age3',
            type: 'el-checkbox-group',
            list: [],
            // apiList: () => {
            //   return new Promise(resolve => {
            //     setTimeout(() => {
            //       resolve([
            //         {
            //           label: 'ceshi ',
            //           value: 1
            //         },
            //         {
            //           label: 'ceshi ',
            //           value: 1
            //         }
            //       ])
            //     }, 1000 * 2)
            //   })
            // },
            nodeData: {
              style: {
                // width: '50%'
              }
            }
          },
          {
            label: '年龄1',
            prop: 'agscsdce1',
            type: 'el-input',
            defaultValue: '44444'
          },
          {
            label: '年龄1',
            prop: 'agsdcse1',
            type: 'el-input'
          },
          {
            label: '年龄1',
            prop: 'agade1',
            type: 'el-input'
          },
          {
            label: '年龄1',
            prop: 'agweghjyke1',
            type: 'el-input'
          }
        ]
      },
      outBtns: [
        {
          key: 'add',
          text: '新增'
        },
        {
          key: 'addy',
          text: '导出',
          render: this.renderTest
        }
      ],
      rightBtns: [
        {
          key: 'add',
          text: '左新增',
          callback: () => {
            this.dialog.visible = true
          }
        },
        {
          key: 'addy',
          text: '左导出'
        }
      ],
      innerColumn: {
        nodeData: {
          props: {
            align: 'center'
          }
        }
      },
      innerBtns: [
        {
          key: 'delete',
          text: '删除',
          disabled: true
        },
        {
          key: 'update',
          text: '编辑'
        }
      ],
      pagination: {
        nodeData: {
          attrs: {
            background: false
          }
        }
      },
      api: {
        list: (searchParams: SearchParams) => {
          return new Promise(resolve => {
            setTimeout(() => {
              let content = [],
                total = 20
              for (let i = 0; i < total; i++) {
                content.push({
                  name: i + '7wsd',
                  name1: i,
                  name2: i,
                  name88: i,
                  gender: 1,
                  age: 14,
                  manual_sg186Tstotal: 0,
                  id: 'test' + i
                })
              }
              let start = ((searchParams?.pageNum || 1) - 1) * (searchParams?.pageSize || 10)
              resolve({
                total,
                content: content.slice(start, start + 10)
              })
            }, 1000)
          })
        },
        delete: () => {
          return new Promise(resolve => {
            resolve({
              code: 0
            })
          })
        }
      },
      columns: [
        {
          label: '序号0',
          type: 'index'
        },
        {
          type: 'selection',
          nodeData: {
            props: {
              'reserve-selection': true
            },
            attrs: {
              'reserve-selection': true
            }
          }
        },
        {
          label: '名称名称名74',
          prop: 'name',
          innerColumnList: [
            {
              label: '名称名称名444',
              prop: 'name88',
              componentName: 'el-input'
            },
            {
              label: '名称名称名783838',
              prop: 'name'
            }
          ]
        },
        {
          label: '名称名称名',
          prop: 'name'
        },
        {
          label: 'xxx',
          prop: 'name1',
          componentName: 'el-input',
          nodeData: {
            scopedSlots: {
              header: this.renderHeader
            }
          }
        },
        {
          label: '名称名称名',
          prop: 'name2'
        },
        {
          label: '合计',
          prop: 'manual_sg186Tstotal',
          componentName: 'w_SumColumn',
          nodeData: {
            props: {
              sumList: ['name1', 'name2']
            }
          }
        },
        {
          label: '名称名称名',
          prop: 'name'
        },
        {
          label: '名称名称',
          prop: 'name'
        },
        {
          label: '名称名称',
          prop: 'name'
        },
        {
          label: '名称名称',
          prop: 'name'
        },
        {
          label: '名称名称',
          prop: 'name'
        },
        {
          label: '名称名称',
          prop: 'name'
        },
        {
          label: '名称名称名',
          prop: 'name'
        },
        {
          label: '名称名称名',
          prop: 'name'
        },
        {
          label: '名称名称名',
          prop: 'name'
        },
        {
          label: '名称名称名',
          prop: 'name'
        }
      ]
    },
    formConfig: {
      columns: [
        {
          label: '姓名',
          prop: 'name',
          type: 'el-date-picker',
          rules: [
            {
              required: true,
              message: 'www'
            }
          ],
          nodeData: {
            props: {
              type: 'datetime',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              format: 'yyyy-MM-dd HH:mm:ss'
            }
          }
        },

        {
          type: 'el-select',
          label: '性别',
          prop: 'gender',
          list: [],
          rules: [
            {
              required: true,
              message: '请输入商品库存'
            }
          ]
        },
        {
          label: '年龄',
          prop: 'age',
          rules: [
            {
              required: true,
              message: 'www'
            }
          ],
          nodeData: {
            attrs: {
              clearable: true
            }
          }
        }
      ]
    },
    api: {
      detail: async row => {
        return {
          status: 200,
          data: {
            provinces: row.provinces?.split(',')
          }
        }
      },
      add: data => {
        console.log(data)
        return new Promise(resolve => {
          resolve({
            code: 0
          })
        })
      }
    }
  }
  public dialog: AnyObj = {
    visible: false,
    model: {
      back: '',
      come: '',
      test: ''
    },
    formConfig: {
      labelWidth: '170px',
      nodeData: {
        props: {
          'validate-on-rule-change': false
        }
      },
      columns: [
        {
          label: 'test1',
          prop: 'back',
          span: 6,
          type: 'el-select',
          list: [
            { label: '计划停电', value: '00' },
            { label: '计划带电', value: '02' }
          ],
          nodeData: {
            on: {
              change: () => {
                this.dialog.model.come = '02'
                console.log('计划性质：--', this.dialog.model)
              }
            }
          }
        },
        {
          label: 'test2',
          prop: 'come',
          span: 6,
          type: 'el-select',
          list: [
            { label: '计划停电', value: '00' },
            { label: '计划带电', value: '02' }
          ],
          nodeData: {
            on: {
              change: () => {
                console.log('计划性质2：--', this.dialog.model)
              }
            }
          }
        }
      ]
    }
  }
  visible = false
  handleDia() {
    // this.visible = true
    // this.showType = !this.showType
    // console.log(this.showType)
    // this.pageConfig2.tableConfig?.columns[2].label = 'test'
  }
  protected render() {
    return (
      <div class="basePage">
        <page ref="wpage" pageConfig={this.pageConfig2}></page>
        <el-dialog title="xxx" visible={this.dialog.visible} width="90%">
          <wform ref="wForm" v-model={this.dialog.model} formConfig={this.dialog.formConfig}></wform>
          <el-button onclick={this.handleYes}></el-button>
        </el-dialog>
      </div>
    )
  }
}
</script>

<style lang="scss">
.basePage {
  display: flex;
  flex-direction: column;
  height: 100%;

  .w_page {
    flex: 1;
    overflow: hidden;

    .w_table {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
